<template>
    <button @click="obj.count++">增加{{obj.count}}</button>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'

const obj = reactive({ count: 0 })

// 注意，你不能直接侦听响应式对象的属性值，例如:
// // 错误，因为 watch() 得到的参数是一个 number
// watch(obj.count, (count) => {
//     console.log(`count is: ${count}`)
// })

// 这里需要用一个返回该属性的 getter 函数：
// 提供一个 getter 函数
// obj.count变化时，调用方法
watch(
    () => obj.count,
    (count) => {
        console.log(`count is: ${count}`)
    }
)

// 使用效果和上面相等
watch(
    function getter() {
        return obj.count
    },
    (count) => {
        console.log(`count is: ${count}`)
    }
)


function getter() {
    obj.count
}
</script>